<!-- 注册 -->
<template>
  <client-only>
    <el-dialog v-model="showRegister" width="840px" title="新用户注册" :z-index="1000" draggable :show-close="false"
      @close="resetForm">
      <template #header="{ close, titleId, titleClass }">
        <div class="use-dialog-header">
          <div :id="titleId" :class="titleClass">新用户注册</div>
          <div class="close">
            <el-icon @click="close">
              <CloseBold />
            </el-icon>
          </div>
        </div>
      </template>
      <div class="main">
        <el-form ref="formRef" class="form" label-position="top" :model="formData" :rules="rules">
        <el-form-item prop="type">
          <template #label>
            <div class="label">
              <div class="num">1</div>
              注册类型
            </div>
          </template>
          <el-radio-group v-model="formData.type">
            <el-radio value="COMPANY">企业</el-radio>
            <el-radio value="PERSON">个人</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="formData.type === 'COMPANY'">
          <el-form-item prop="categoryCodes">
            <template #label>
              <div class="label">
                <div class="num">2</div>
                企业类型
              </div>
            </template>
            <el-checkbox-group v-model="formData.categoryCodes">
              <el-checkbox
                v-for="(item, index) in categoryList"
                :key="index"
                :label="item.categoryName"
                :value="item.categoryCode"
              />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item prop="companyScale">
            <template #label>
              <div class="label">
                <div class="num">3</div>
                您的企业规模
              </div>
            </template>
            <el-radio-group v-model="formData.companyScale">
              <el-radio :value="1">0-50人</el-radio>
              <el-radio :value="2">51-200人</el-radio>
              <el-radio :value="3">200人以上</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="companyName">
            <template #label>
              <div class="label">
                <div class="num">4</div>
                您的企业名称
              </div>
            </template>
            <el-input v-model="formData.companyName" placeholder="请输入您的企业名称"></el-input>
          </el-form-item>
        </template>
        <el-form-item prop="contactName">
          <template #label>
            <div class="label">
              <div class="num">{{ formData.type === "PERSON" ? 2 : 5 }}</div>
              联系人姓名
            </div>
          </template>
          <el-input v-model="formData.contactName" placeholder="请输入联系人姓名"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <template #label>
            <div class="label">
              <div class="num">{{ formData.type === "PERSON" ? 3 : 6 }}</div>
              联系人电话
            </div>
          </template>
          <el-input v-model="formData.phone" placeholder="请输入联系人电话"></el-input>
        </el-form-item>
        <el-form-item prop="validateCode">
          <template #label>
            <div class="label">
              <div class="num">{{ formData.type === "PERSON" ? 4 : 7 }}</div>
              验证码
            </div>
          </template>
          <div class="flex-btw w-full">
            <el-input class="captcha" v-model="formData.validateCode" placeholder="请输入验证码" clearable></el-input>
            <send-code
              class="send-code"
              :params="{ phone: formData.phone, type: 'USER_REGISTER' }"
              :elRef="formRef"
              :round="false"
            />
          </div>
        </el-form-item>
      </el-form>
      <p class="tip">注意：提交注册成功后即可使用手机号进行登录，且初始密码为手机号后四位，登录后可修改密码。</p>        <div class="btns">
          <div><el-button round class="bigBtn" type="primary" @click="onSubmit">提交注册</el-button></div>
        </div>
      </div>
    </el-dialog>
  </client-only>
</template>

<script setup>
// 获取用户信息
import { storeToRefs } from "pinia";
const global = useStore.global()
const user = useStore.user()
const { showRegister } = storeToRefs(user)
const { categoryList } = storeToRefs(global)

const formRef = ref();
const formData = ref({
  type:"COMPANY"
});

const rules = {
  type: [{ required: true, message: "请选择注册类型", trigger: "change" }],
  categoryCodes: [{ required: true, type: "array", message: "请选择企业类型", trigger: "change" }],
  companyScale: [{ required: true, message: "请选择企业规模", trigger: "change" }],
  phone: [{ required: true, message: "请输入联系人电话", trigger: "blur" }],
  companyName: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
  contactName: [{ required: true, message: "请输入联系人姓名", trigger: "blur" }],
  validateCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
};


// 提交
const onSubmit = () => {

  formRef.value.validate((valid) => {
    if (valid) {
      api.post('/user/front/register',{...formData.value,categoryCodes: formData.value.categoryCodes ? formData.value.categoryCodes.join(",") : null},{msg:true,loading:true}).then(res => {
        resetForm()
      })
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = () => {
  formRef.value.resetFields()
  user.showRegister=false
}

</script>
<style lang='scss' scoped>
.main {
  margin: 0 170px;
}

.captcha {
  flex: 1;
  margin-right: 10px;
}

.toggle {
  .el-button--text {
    color: var(--use-color-warning);
    font-size: 16px;
  }
}


.btns {
  margin: 32px 0;

  .el-button {
    width: 100%;
    border-radius: 56px !important;
  }
}

.form {
  .label {
    display: inline-flex;
    align-items: center;

    .num {
      width: 18px;
      height: 18px;
      line-height: 18px;
      border-radius: 2px;
      background: var(--use-color-light-2);
      text-align: center;
      font-size: 12px;
      margin-right: 8px;
    }
  }
}

.send-code{
  height: 40px;
}

.tip{
  color: var(--use-color-danger);
}
</style>
